<template>
	<view>
		<navbar :name="'我的签到'"></navbar>
		<view class="SignIn-topBG">
			<view class="SignIn-dayFlex">
				<view class="flex-item item-month">
					<view class="title">
						month
					</view>
					<view class="second">
						{{result.totalNum||0}}<text>次</text>
					</view>
					<view class="tatename">当月签到</view>
				</view>
				<view class="flex-item item-day">
					<view class="title">
						day
					</view>
					<view class="second">
						{{result.allDayNum||0}}<text>天</text>
					</view>
					<view class="tatename">全天签到</view>
				</view>
				<view class="flex-item item-half">
					<view class="title">
						Half a day
					</view>
					<view class="second">
						{{result.halfDayNum||0}}<text>天</text>
					</view>
					<view class="tatename">半天签到</view>
				</view>
			</view>
		</view>
		<view class="calendar-trsm">
			<view class="calendar-lrview">
				<view class="button-switch switch-year" @tap="monthTap(-12)">

				</view>
				<view class="button-switch switch-month" @tap="monthTap(-1)">

				</view>
				<view class="button-value">
					<!-- 2021年11月 -->
					{{monthArr[0]}}年{{monthArr[1]}}月
				</view>
				<view class="button-switch switch-month switch-trR180" @tap="monthTap(1)">

				</view>
				<view class="button-switch switch-year switch-trR180" @tap="monthTap(12)">

				</view>
			</view>
			<!--日历控件  -->
			<calendar ref="calendar" @queryindex="change($event)" :statisticsDetailVOS="statisticsDetailVOS" :yearAndMonth="yearAndMonth" :value='month'
				@change='change'></calendar>
			<!-- end -->
		</view>
	</view>
</template>

<script>
	import calendar from "./components/calendar/index.vue"
	export default {
		components: {
			calendar
		},
		data() {
			return {
				statisticsDetailVOS:[],//当月数据
				result:{},//全部数据
				yearAndMonth: '',
				monthArr: this.$basejs.getToday(), //当前月数组
				month: this.$basejs.getToday().join('-'), //日历控件日期
			}
		},
		onLoad() {
			this.getSignByMonth(this.monthArr[0],this.monthArr[1])
		},
		methods: {
			getSignByMonth(year,month) {
              let monthStr = month+"";
              month = (month<10 && monthStr.search("0") == -1)?'0'+month:month;
              this.yearAndMonth = year+'-'+month
				let _this = this;
				this.$loginl.get(global.apiUrls.getSignByMonth, {
						month: this.yearAndMonth
					})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							_this.result = result;
							let statisticsDetailVOS = [];
							if(result){
								statisticsDetailVOS = result.statisticsDetailVOS
							}
							for(let i = 0;i<statisticsDetailVOS.length;i++){
								let yearData = _this.$basejs.dataType(statisticsDetailVOS[i].signInDate)
								statisticsDetailVOS[i].signInDate = yearData.n+'-'+yearData.y+'-'+yearData.r
							}
							console.log(statisticsDetailVOS,'96666666666666666')
							_this.statisticsDetailVOS = statisticsDetailVOS;
						}
					}).catch(err => {})
			},
			monthTap(month) {
				if (month == -12) { //减一年
					this.$set(this.monthArr, 0, this.monthArr[0]*1 - 1)
				} else if (month == -1) { //减一个月
					if (this.monthArr[1] == 1) { //小于1月
						this.$set(this.monthArr, 0, this.monthArr[0]*1 - 1)
						this.$set(this.monthArr, 1, 12)
					} else { //大于一个月
						this.$set(this.monthArr, 1, this.monthArr[1] - 1)
					}
				} else if (month == 12) { //加一年
					this.$set(this.monthArr, 0, this.monthArr[0]*1 + 1)
				} else if (month == 1) { //加一个月
					if (this.monthArr[1] == 12) { //小于1月
						this.$set(this.monthArr, 0, this.monthArr[0]*1 + 1)
						this.$set(this.monthArr, 1, 1)
					} else { //大于一个月
						this.$set(this.monthArr, 1, this.monthArr[1]*1 + 1)
					}
				}
				this.getSignByMonth(this.monthArr[0],this.monthArr[1])
				console.log(this.monthArr, 9555)
			},
			change(e) {
				console.log(e)
				this.month = e
				this.monthArr = e.split('-')
				this.getSignByMonth(this.monthArr[0]*1,this.monthArr[1]*1)
			},
		}
	}
</script>

<style lang="scss">
	// 顶部背景
	.SignIn-topBG {
		width: 750rpx;
		height: 520rpx;
		margin: 0 auto;
		background: url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png)no-repeat;
		background-size: 100% 100%;
		padding-top: 60rpx;

		.SignIn-dayFlex {
			width: 720rpx;
			height: 188rpx;
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			color: #fff;

			.flex-item {
				width: 220rpx;
				height: 188rpx;
				border-radius: 15rpx;
				text-align: center;
				position: relative;

				.title {
					color: #fff;
					font-size: 24rpx;
					padding: 10rpx;
					text-align: left;
				}

				.second {
					font-size: 48rpx;

					text {
						font-size: 30rpx;
					}
				}

				.tatename {
					font-size: 24rpx;
				}
			}

			.flex-item::before {
				content: '';
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 12rpx;
				top: 15rpx;
				background: url(http://static.bsyjk.cn/icons%402x/B944A88F310840C09142BC48DEB211E6.png)no-repeat;
				background-size: 100% 100%;
			}

			.flex-item::after {
				content: '';
				width: 180rpx;
				height: 30rpx;
				position: absolute;
				left: 20rpx;
				bottom: 0rpx;
				background: url(http://static.bsyjk.cn/charts%402x/C9229FD7AF3C40B3A8A468DAEB96D9B2.png)no-repeat;
				background-size: 100% 100%;
			}

			.item-month {
				background: #F56767;
			}

			.item-day {
				background: #6AE5C4;
			}

			.item-half {
				background: #F5A623;
			}
		}
	}

	// 日历
	.calendar-trsm {
		width: 720rpx;
		margin: 0 auto;
		transform: translateY(-200rpx);

		.calendar-lrview {
			width: 720rpx;
			height: 100rpx;
			background: #fff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 20rpx 30rpx;
			display: flex;
			position: relative;

			.button-switch {
				width: 10%;
			}

			.button-value {
				width: 59%;
				text-align: center;
				font-size: 36rpx;
				color: #2EA7E0;
			}

			.switch-year {
				background: url(http://static.bsyjk.cn/jianYear/A63A5CF92C174FCBB2EF6CE7C900FF4D.png)no-repeat center;
				background-size: 42rpx 40rpx;
			}

			.switch-month {
				background: url(http://static.bsyjk.cn/jianMonth/3CE8C169EA4244B9A5625A119963207B.png)no-repeat center;
				background-size: 42rpx 40rpx;
			}

			.switch-trR180 {
				transform: rotate(180deg);
			}
		}

		.calendar-lrview::before {
			content: '';
			width: 118rpx;
			height: 60rpx;
			position: absolute;
			top: -40rpx;
			left: 86rpx;
			background: url(http://static.bsyjk.cn/rilikakou/C9B05FD0937247F0991EBBA40EE43DA2.png)no-repeat;
			background-size: 100% 100%;
		}

		.calendar-lrview::after {
			content: '';
			width: 118rpx;
			height: 60rpx;
			position: absolute;
			top: -40rpx;
			right: 86rpx;
			background: url(http://static.bsyjk.cn/rilikakou/C9B05FD0937247F0991EBBA40EE43DA2.png)no-repeat;
			background-size: 100% 100%;
		}
	}
</style>
